<script lang="ts">
    import * as Avatar from "$lib/components/ui/avatar";
    import clsx from "clsx";
    import type { SpaceUser } from ".";
    import UiButton from "./UiButton.svelte";

    let { user }: { user: SpaceUser } = $props();
</script>

{#snippet avatar(user: SpaceUser)}
    <Avatar.Root
        class={clsx("select-none ring-2", user.perm > 0 && "ring-white")}
    >
        <Avatar.Image src={user.avator} alt="" />
        <Avatar.Fallback>{user.username.slice(0, 2)}</Avatar.Fallback>
    </Avatar.Root>
{/snippet}

{#if user.perm === 2}
    {@render avatar(user)}
{:else}
    <UiButton>
        {@render avatar(user)}
    </UiButton>
{/if}
